<template>
<p id="p1">这里是Id为P1的</p>
<p v-bind:id="dynamicId">这里是用到v-bind</p>
<a :href="src">跳转链接</a>
<button @click="dynamicId = 'BBB'">点我换颜色</button>
</template>

<script setup>
// v-bind 指令指示 Vue 将元素的 id attribute 与组件的 dynamicId 属性保持一致。如果绑定的值是 null 或者 undefined，那么该 attribute 将会从渲染的元素上移除。
import {ref} from 'vue'
const dynamicId = ref('AAA')
const src=ref('https://baidu.com')
</script>

<style scoped>
#p1{
    color:rgb(255, 24, 93);
}
#dynamicId{
    color:rgb(8, 241, 241);
}
#AAA{
    color:blueviolet;
}
#BBB{
    color:brown;
}
</style>